<template>
  <div class="app-container">
    <!-- 操作 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" @submit.prevent>
      <el-form-item prop="ip" v-if="props.tableOperate">
        <el-input
          v-model="queryParams.ip"
          placeholder="请输入IP"
          Query
          clearable
          style="width: 240px"
          @keyup.enter="searchQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="searchQuery"
          v-if="props.tableOperate"
          >搜索</el-button
        >
        <el-button type="primary" plain icon="Refresh" @click="getData()"
          >刷新</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table
      v-loading="loading"
      :data="scriptList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" width="55">
        <template #default="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="系统" prop="osName" width="110" />
      <el-table-column label="IP" width="150">
        <template #default="scope">
          <span v-if="scope.row.isOnline != '0'">{{ scope.row.ip }}</span>
          <el-tooltip
            placement="top"
            :content="scope.row.disconnectReason"
            v-if="scope.row.isOnline == '0'"
          >
            <span class="scope_proc_red">{{ scope.row.ip }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="进程名称" prop="processName"> </el-table-column>
      <el-table-column label="进程PID" prop="processPid"> </el-table-column>
      <el-table-column label="进程状态" prop="processStatus">
        <template #default="scope">
          <span v-if="scope.row.processStatus=='active'" class="scope_run">active</span>
          <span v-if="scope.row.processStatus=='negative'" class="scope_proc_red">停止</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="脚本名称" prop="scriptName"> </el-table-column>
      <el-table-column label="脚本PID" prop="scriptPid"> </el-table-column>
      <el-table-column label="脚本状态" prop="scriptStatus">
        <template #default="scope">
          <span v-if="scope.row.scriptStatus=='running'" class="scope_run">running</span>
          <span v-if="scope.row.scriptStatus=='stop'" class="scope_proc_red">停止</span>
        </template>
      </el-table-column> -->
      <el-table-column label="更新时间" prop="updateTime" width="100" />
      <el-table-column label="备注" prop="remark" />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getData"
    />
  </div>
</template>

<script setup>
import { getList, searchHost } from "@/api/system/process";
import { ref } from "vue";

const { proxy } = getCurrentInstance();
const loading = ref(true);
const scriptList = ref([]);
const ids = ref([]);
const total = ref(0);
const data = reactive({
  queryParams: {
    ip: "",
    pageNum: 1,
    pageSize: 10,
  },
});
const { queryParams } = toRefs(data);

/** 查询列表数据 */
const props = defineProps({
  tableOperate: {
    type: Boolean,
    default: true,
  },
  ip: {
    type: String,
    required: true,
  },
});

watch(
  () => props.ip,
  (newVal, oldValue) => {
    queryParams.value.ip = newVal;
    getData();
  }
);

function getData() {
  loading.value = true;
  if (queryParams.value.ip) {
    searchHost(queryParams.value).then((response) => {
      scriptList.value = response.data.data;
      total.value = response.data.total;
      loading.value = false;
    });
  } else {
    getList(queryParams.value).then((response) => {
      scriptList.value = response.data.data;
      total.value = response.data.total;
      loading.value = false;
    });
  }
}

/** 搜索按钮操作 */
function searchQuery() {
  queryParams.value.pageNum = 1;
  getData();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
}

getData();

setInterval(function () {
  getData();
}, 60000);
</script>

<style>
.scope_percent {
  font-weight: bold;
  background: #409eff;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
.scope_run {
  font-weight: bold;
  background: #67C23A;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
.system_btn,
.chart_btn,
.portrait_btn {
  background: #409eff;
  width: 60px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  border: 0;
}
.system_btn:hover,
.chart_btn:hover {
  background: rgba(64, 158, 255, 0.8);
  color: #fff;
}
.portrait_btn {
  background: #e15361 !important;
}
.portrait_btn:hover {
  background: rgba(225, 83, 97, 0.8) !important;
  color: #fff;
}
.remark-text textarea {
  height: 70px;
}
.scope_proc_red {
  font-weight: bold;
  background: #e15361;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
</style>
